<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>行驶分析</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="/wx/css/bootstrap.min.css" rel="stylesheet">
    <link href="/wx/css/jquery-confirm.min.css" rel="stylesheet">
    <link href="/wx/css/font-awesome.min.css" rel="stylesheet">
    <script src="/wx/js/jquery.min.js"></script>
    <script src="/wx/js/bootstrap.min.js"></script>
    <script src="/wx/js/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="/wx/css/chongzhi.css" />
   	<script>
			$(document).ready(function() {
				if($("#totalRang").val()>17000){
					 $("#zhezhao").show();
				}
				$("#zhezhao").on('click', function(){
			       	   $("#zhezhao").hide();
		   		 })
		     function clear(){
					 $.ajax({
							type : "POST",
							url : "person/clear0",
							dataType : "json",
							data : {
								
							},
							success : function(data) {
								$("#totalRang").html(0);
								$("#zhezhao").hide();
							},
							error : function(data) {
							}
						}); 	 
				}
			})
		</script>
</head>
<body>
<div>
	<div id="zhezhao" hidden>
		<div id="blank" style="width: 100%;height: 100%;opacity: 0.5;margin-top: -40px;background: #000;position: absolute;z-index: 99;"> 
		
		</div>
		<div style="width: 100%;height: 100px;top:30%;height:160px;position: absolute;z-index: 999;background: #fff;width:90%;border-radius: 10px;left:5%;">
			<div style="text-align: center;font-size: 17px;padding-top:20px;border-bottom: 1px solid cornflowerblue;padding-bottom: 10px;width:90%;margin:0 auto">温馨提示</div>
			<p style="font-size: 15px;line-height: 25px;padding:20px">您的爱车，距离上次换油保养后，已行驶接近<span style="color:red">20000</span>KM，请及时换油。</p>
			<div style="float: right;margin-right: 20px;font-size: 13px;border: 1px solid cornflowerblue;width:70px;text-align: center;border-radius: 10px;" onclick="clear()">清&nbsp;零</div>
		</div>  
	</div>
	<div class="behave-top">
			<img src="/wx/images/huo-car.png" class="huo-car">
			<span>上次换油后，您的爱车以行驶<span style="font-size: 23px;padding-left: 3px;padding-right: 3px;" id="totalRang">${rang.rang}</span>KM</span>
			</div>
			<input type="hidden" value="${rang.range}" id="aaaa"/>
			<input type="hidden" value="${rang.range}" id="totalrang"/>
				<div style="margin-top:15px">
					<div class="second circle">
						<p style="font-size: 15px;margin-top:-140px;color: darkseagreen;">总里程</p>
						<strong style="font-size: 43px; padding-top: 80px;font-family:'微软雅黑'"></strong>
					</div>
					<script src="/wx/js/circle-progress-behava.js"></script>
					<script src="/wx/js/examples-behava.js"></script>
				</div>
			<div style="width: 90%;border-bottom: 2px solid cornflowerblue; margin:50% auto 0 auto;"></div>
			<div style="color: cornflowerblue;background: #eee;font-size: 14px;margin-left: 31%;margin-top: -13px;width: 146px;padding-left: 11px;">规范行车，一路平安</div>
		</div>
		<table>
			<tr class="table-tr1">
				<td><span class="table-fen">${rang.accelerateCnt }</span>次</td>
				<td><span class="table-fen">${rang.decelerateCnt }</span>次</td>
				<td><span class="table-fen">${rang.TodayDate }</span>小时</td>
			</tr>
			<tr>
				<td><img src="/wx/images/shache.png"></td>
				<td><img src="/wx/images/ji.png"></td>
				<td><img src="/wx/images/shi.png"></td>
			</tr>
			<tr class="table-tr3">
				<td>急刹车</td>
				<td>急加速</td>
				<td>持续时间</td>
			</tr>
		</table>
</body>
</html>